<template>
   <footer @click="showCart">
            <div class="Footleft">
              <span ref="on" class="cart iconfont icon-gouwuchexuanzhong">
            </span>
            <div class="cart1">
                ￥0
            </div>
            <div class="delivery">
                另外配送费￥3元
            </div>
            </div>
           <div class="total">
            ￥20元起送
        </div>
        <ShoppinCarVue v-show="flag"></ShoppinCarVue>
        </footer>
</template>

<script>
import ShoppinCarVue from '@/components/ShoppinCar.vue'
export default {
  components:{
    ShoppinCarVue
  },
  data(){
    return{
        flag:false
    }
  },
  methods:{
    showCart(){
      this.flag=!this.flag;
      this.$refs.on.style['z-index']=1
    }
  }
}
</script>

<style scoped>
footer {
  width: 100%;
  height: 1rem;
  min-height: 1rem;
  background-color: #141d27;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  bottom: 0;
  font-size: 0.18rem;
  color: #d9dde1;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.Footleft{
  flex: 1;
  height: w;
  position: relative;
  display: flex;
}
.total {
  width: 2.1rem;
  height: 100%;
  text-align: center;
  font-size: 200%;
  background-color: rgba(255, 255, 255, 0.4);
  font-weight: 700;
  line-height: 1rem;
}
.cart {
  width: 116px;
  height: 116px;
  border-radius: 50%;
  font-size: 70px;
  text-align: center;
  line-height: 100px;
  color: #80858a;
  border: 12px solid #141d27;
  background-color:#2b343c;
  position: absolute;
  left: 36px;
  bottom: 0;
}
.cart1{
   /* width: 200px;
   height: 0.48rem; */
  margin-right: 50px;
  padding-right: 40px;
   flex: 1;
  font-size: 32px;
   text-align: right;
   border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.delivery{
    -webkit-box-flex: 1;
  -webkit-flex: 1;
     -moz-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
/* 
.cart .cartImg {
  width: 1.16rem;
  height: 1.16rem;
  background: url(../assets/SVG/shopping_cart.svg);
  -o-background-size: 100%;
     background-size: 100%;
  background-position: center;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  border: 0.12rem solid #131d26;
  position: absolute;
  left: 0.24rem;
  bottom: 0;
}

.cart1 {
  width: 1.5rem;
  height: 0.48rem;
  font-size: 0.32rem;
  border-right: 0.02rem solid rgba(255, 255, 255, 0.1);
}

.delivery {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
     -moz-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
} */
</style>